<template lang='pug'>
.wrapper.recommend(v-if="show")
  .carea
    .cbox(v-for="(item,index) in clist",:key="item.id",:class="[index%2==0?'left':'']",@click.stop="to4Page(item)")
      img(:src="item.cmmdtyCode | newImgUrl(item.cmmdtyImageSrc)" @error="error").commodityImg
      p.msg {{item.cmmdtyName}}
      template(v-if="item.price == -1 || item.price=='' || item.saleType == '1' || item.availableQty == '0' || item.availableQty == ''")
        span.rmb.wh(v-if="item.price != '-1'") &yen;
        span.rmb(v-else)
        span.now-price.wh {{item.price == '-1'?'暂无报价': item.price}}
        //- span(v-if="item.basePrice")
        span(v-if="item.basePrice!=null && item.basePrice != item.price && item.basePrice.length < 7 && item.price.length < 7 && item.basePrice != ''").old-price &yen;{{item.basePrice}}
        span.brd {{item.sendFlagStr}}
        .wuhuoicon
      template(v-else)
        span.rmb &yen;
        span.now-price {{item.price}}
        span(v-if="item.basePrice!=null && item.basePrice != item.price && item.basePrice.length < 7 && item.price.length < 7 && item.basePrice != ''").old-price &yen;{{item.basePrice}}
        span.brd {{item.sendFlagStr}}
</template>
<script>
import { unique } from '@/config/utils'
import { getCommodityData } from '@/service/getData'
export default {
  data () {
    return {
      clist: [], //商品列表
      ids: [],
      show: true
    }
  },
  props: ['cdata'],
  created () {
    if (!this.cdata[0].tag) {
      this.show = false
      return
    }
    this.getIds();
    this.getPro();
  },
  methods: {
    // 获取ids
    getIds() {
      let arr = []
      this.cdata[0].tag.forEach(function (item) {
        arr.push(`${item.elementDesc || '0000000000'}-${item.elementName}`)
      })
      this.ids = arr
    },
    getPro() {
      let p = this.$store.state.position
      getCommodityData(p.cityCode, p.storeLocation, this.ids).then((commoditydata)=>{
        if (commoditydata.resultMsg == "成功") {
        this.clist = commoditydata.resultData.splice(0,20)
        // if (this.clist.length%2 == 1) {
        //   this.clist = this.clist.splice(0,this.clist.length -1)
        // }
      }
      })
    },
    to4Page(item) {
      this.$router.push({path:`/detail/${item.cmmdtyCode}/${item.supplierCode}`})
    },
    error(e) {
      e.target.src = "/static/images/pro-default.png"
    }
  },
  computed: {
    data() {
      return this.cdata[0].tag;
    }
  }
}
</script>

<style lang='scss' scoped>
@import './tool.scss';
.recommend {
    width: _(750);
  .carea {
    width: 100%;
    overflow: hidden;
    .cbox {
      width: 50%;
      background-color: #fff;
      box-sizing: border-box;
      height: _(374);
      overflow: hidden;
      float: left;
      border-top: 1px solid #f0f0f0;
      position:relative;
      img {
        display: block;
        width: _(240);
        height: _(240);
        margin: 0 auto;
        margin-top: _(20);
      }
      .wuhuoicon {
        width: _(140);
        height: _(140);
        background: url('/static/images/soldout.png');
        background-size: 100% 100%;
        z-index: 2;
        position: absolute;
        left:0;
        right:0;
        margin:auto;
        top:_(70);
      }
      .msg {
        display: block;
        width: _(326);
        height: _(37);
        line-height: _(37);
        margin: 0 auto;
        margin-top: _(9);
        font-size: _(26);
        color: #444;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .now-price,
      .old-price {
        display: inline-block;
        line-height: _(50);
      }
      .now-price,
      .rmb {
        font-size: _(30);
        color: #ff782d;
      }
      .rmb {
        font-size: _(22);
        margin-left: _(24);
      }
      .old-price {
        margin-left: _(13);
        font-size: _(26);
        color: #aaa;
        text-decoration: line-through
      }
      .wh {
        color:#aaa;
      }
      .brd {
        display: inline-block;
        margin-left: _(12);
        padding: 0 _(12);
        font-size: _(18);
        color: #ff782d;
        border: 1px solid #ff782d;
        border-radius: 100px;
        text-align: center;
        line-height: _(25);
      }
    }
    .left {
      border-right: 1px solid #f0f0f0;
    }
  }
  .showmore {
    clear: both;
    display: block;
    width: 100%;
    height: _(80);
    background-color: #fff;
    line-height: _(80);
    text-align: center;
    font-size: _(24);
    color: #666;
    border-top: 1px solid #f7f7f7;
    i {
      display: inline-block;
      margin-left: _(10);
      width: _(10);
      height: _(17);
      background: url('/static/images/rightb.png');
      background-size: 100% 100%;
    }
  }
}

</style>
